<template>
  <div class="category-set">
    <el-dialog
      :title="visible.type===0? '添加应用类别':'修改应用类别'"
      :visible.sync="visible.showSetDialog"
      width="600px"
      center
      :close-on-click-modal="false"
    >
      <div class="content">
        <div class="line flex-left">
          <label class="title">分类名称(中)</label>
          <el-input v-model="param['name[zh-CN]']" size="medium" placeholder="请输入分类名称"></el-input>
        </div>
        <div class="line flex-left">
          <label class="title">分类名称(英)</label>
          <el-input v-model="param['name[en-US]']" size="medium" placeholder="请输入分类英文名称（选填）"></el-input>
        </div>
        <div class="line flex-left">
          <label class="title">分类名称(日)</label>
          <el-input v-model="param['name[ja]']" size="medium" placeholder="请输入分类日文名称（选填）"></el-input>
        </div>
        <div class="line flex-left">
          <label class="title">分类排序</label>
          <el-input v-model="param.sort" size="medium" placeholder="请输入分类排序"></el-input>
        </div>
        <div class="line flex-left">
          <label class="title">应用展示数量</label>
          <el-input v-model="param.limit" size="medium" placeholder="请输入分类下应用展示的数量"></el-input>
        </div>
        <div class="line flex-left">
          <label class="title">展示样式</label>
          <div>
            <el-radio v-model="param.style" label="1">竖列排序</el-radio>
            <el-radio v-model="param.style" label="2">宫格排序</el-radio>
            <el-radio v-model="param.style" label="3">滑动排序</el-radio>
            <el-radio v-model="param.style" label="4">专题模式</el-radio>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible.showSetDialog = false">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submit"
          :disabled="onSubmit"
          :loading="onSubmit"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addCategorys,
  updateCategory
} from "../../views/Explorer/Explorer.service";
export default {
  props: ["visible", "platform_id"],
  data() {
    return {
      headers: {
        token: this.$store.state.token
      },
      param: {
        "name[zh-CN]": "",
        "name[en-US]": "",
        "name[ja]": "",
        sort: "",
        limit: "",
        style: "1",
        status: "1",
        platform_id: ""
      },
      onSubmit: false
    };
  },
  watch: {
    visible: {
      handler(item) {
        if (item.type === 1) {
          let { name, ...data } = item.data;
          let names = {
            "name[zh-CN]": item.data.name["zh-CN"],
            "name[en-US]": item.data.name["en-US"],
            "name[ja]": item.data.name["ja"]
          };
          this.param = Object.assign(names, data);
        }
        this.param.platform_id = this.platform_id;
        if (item.showSetDialog === false) {
          this.param = {
            "name[zh-CN]": "",
            "name[en-US]": "",
            "name[ja]": "",
            sort: "",
            limit: "",
            style: "1",
            status: "1",
            platform_id: ""
          };
        }
      },
      deep: true
    }
  },
  methods: {
    async submit() {
      console.log(this.param);
      if (this.param["name[zh-CN]"] === "") {
        this.$message.error("分类名称不能为空");
        return;
      }
      if (this.param.sort === "") {
        this.$message.error("分类排序不能为空");
        return;
      }
      if (this.param.limit === "") {
        this.$message.error("展示数量不能为空");
        return;
      }
      const res =
        this.visible.type === 0
          ? await addCategorys(this.param)
          : await updateCategory(this.param);
      if (res.code === 0) {
        // this.param = {
        //   "name[zh-CN]": "",
        //   "name[en-US]": "",
        //   "name[ja]": "",
        //   sort: "",
        //   limit: "",
        //   style: 1,
        //   status: "1"
        // };
        this.$notify.success({
          title: "提示",
          message: this.visible.type === 0 ? "添加成功" : "修改成功"
        });
        this.$emit("success");
      }
    }
  }
};
</script>

<style lang="scss">
.category-set {
  .el-dialog__header {
    border-bottom: 1px solid #e9e9e9;
    padding: 15px;
    font-weight: 600;
  }
  .content {
    .line {
      line-height: 60px;
      .title {
        width: 6em;
        text-align: right;
        margin-right: 20px;
        flex-shrink: 0;
      }
    }
  }
}
</style>